<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .center {
            /*width: 960px;*/
            margin: 0 auto;
            min-width: 960px;
        }

        .nav {
            background-color: #333333;
            height:70px;
            overflow: hidden;
            width: 100%;
        }

        .nav_lineprinter li {
            float: left;
        }

        .nav_lineprinter li a {
            display: inline-block;
            font: 18px "Microsoft YaHei";
            letter-spacing: 3px;
            height: 100%;
            line-height: 40px;
            text-align: center;
            /*width: 240px;*/
            color: white;
            text-decoration: none;
        }

        /*.nav_lineprinter li.active {*/
        /*    background-color: rgb(8, 89, 181);*/
        /*}*/

        .nav_lineprinter li:hover {
            background-color: #575757;
        }
        .nav_lineprinter li.active a {
            color: yellow;
        }
        /* 提取的样式 */
        #logoutButton {
            float: right;
            margin-right: 20px;
            line-height: 45px;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
        }

        #phoneNumberDisplay {
            float: right;
            margin-top: 10px;
            margin-right: 20px;
            font-size: 20px;
            color: white;
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s; /* 添加过渡效果 */
        }

        /* 鼠标悬停效果 */
        #logoutButton:hover {
            color: #ffde02;
            text-decoration: underline;
        }

        #phoneNumberDisplay:hover {
            color: #ffde02;
            text-decoration: underline;
        }

    </style>
</head>
<body>
<div class="container">
    <!-- 导航栏 -->
    <div class="nav">
        <div class="center">
            <ul class="nav_lineprinter">
                <li class="active"><a href="javascript:;">首页</a></li>
                <li style="margin-left: 40px"><a href="javascript:;">二手</a></li>
                <li style="margin-left: 40px"><a href="javascript:;">新房</a></li>
                <li style="margin-left: 40px"><a href="javascript:;">租赁</a></li>
                <li style="margin-left: 40px"><a href="javascript:;">发布房源</a></li>
                <li style="margin-left: 40px"><a href="javascript:;">问问AI</a></li>

            </ul>
        </div>
        <div id="logoutButton" >退出</div>
      <div id="phoneNumberDisplay"  ></div>

    </div>
    <!-- 各导航栏详细信息 ----- 默认引入首页-->
    <div class="center">
        <div id="products">
            <iframe id="frameContent" src="index.html" style="width: 100%; padding-top: 10px; height: 3000px; border: 0;" scrolling="no"></iframe>
        </div>
    </div>
    <a  href="my/index.html"></a>
</div>
<script>
    // 从 localStorage 中获取电话号码
    const storedPhoneNumber = localStorage.getItem('phoneNumber');

    // 获取目标元素
    const phoneNumberElement = document.getElementById('phoneNumberDisplay');

    // 屏蔽电话号码中间的几位
    const maskedPhoneNumber = maskPhoneNumber(storedPhoneNumber);
    // 在点击事件处理程序中实现页面跳转
    phoneNumberElement.addEventListener('click', function() {
        window.location.href = "my/index.html?maskedPhoneNumber=" + encodeURIComponent(maskedPhoneNumber);
    });

    // 检查是否有存储的电话号码
    if (storedPhoneNumber) {


        // 设置元素的内容为格式化后的电话号码
        phoneNumberElement.textContent = maskedPhoneNumber;
    } else {
        // 如果没有存储的电话号码，可以显示默认信息或做其他处理
        console.log('No phone number found in localStorage.');
    }

    // 函数：屏蔽电话号码中间的几位
    function maskPhoneNumber(phoneNumber) {
        // 检查电话号码长度是否符合要求
        if (phoneNumber.length !== 11) {
            return phoneNumber; // 如果不是标准的 11 位电话号码，返回原值
        }

        // 使用字符串操作方法将中间的 4 位替换为星号
        return phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(7);
    }
    // 添加退出按钮的点击事件
    document.getElementById('logoutButton').addEventListener('click', function() {
        // 清除 localStorage 中的所有数据
        localStorage.clear();

        // 重定向到首页
        window.location.href = '../index.html'; // 假设 '/' 是你的首页 URL
    });
    var navs = ["index.html", "Secondhand.html", "Newhouse.html", "rent.html","PostHouse.html","AI_Assistant.html"];
    var navItems = document.querySelectorAll(".nav_lineprinter li");
    // console.log(localStorage.getItem('token'))
    for (var i = 0; i < navItems.length; i++) {
        navItems[i].addEventListener("click", function() {
            // 移除之前的激活状态
            var current = document.querySelector(".nav_lineprinter li.active");
            if (current) {
                current.classList.remove("active");
            }

            // 添加新的激活状态
            this.classList.add("active");

            // 切换页面
            var index = Array.prototype.indexOf.call(this.parentNode.children, this);
            document.getElementById("frameContent").src = navs[index];
        });
    }
</script>
</body>
</html>
